<template>
  <view class="edit-nickname-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        圈子昵称
      </view>
    </navigation-bar>
    <!-- 编辑昵称 -->
    <view class="edit-box">
      <view class="edit-ipt">
        <cc-textarea height="240rpx" v-model="nicknameInputVal" placeholder="输入您的新昵称，展现不一样的风采！"
          :maxlength="10"></cc-textarea>
      </view>
    </view>
    <!-- 提交按钮 -->
    <navigator url="/thirdpkg/center-detail/center-detail" open-type="navigateBack" hover-class="none"
      class="bottom-submit-btn">
      提交
    </navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        nicknameInputVal: ''
      }
    },
    onLoad(options) {
      this.nicknameInputVal = options.nickname === '昵称' ? '' : options.nickname
    },
    onUnload() {
      uni.$emit('submitNicknameInfo', this.nicknameInputVal)
    }
  }
</script>

<style lang="scss">
  .edit-nickname-container {
    .top-title-bar {}

    .edit-box {
      padding: 20rpx 36rpx;
    }

    .bottom-submit-btn {
      position: fixed;
      bottom: 120rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 660rpx;
      height: 80rpx;
      background-color: #000;
      border-radius: 50rpx;
      color: #FFF;
      font-size: 40rpx;
      text-align: center;
      line-height: 80rpx;
      z-index: 99;
    }
  }
</style>